<template>
  <div class="home-index">
    <div class="page-header">
      <p
        class="day-text muted"
        v-if="yiyan"
        :data-type="yiyan_cate[yiyan_cate_c].title"
        :data-uuid="yiyan.uuid"
        :href="'https://hitokoto.cn?uuid=' + yiyan.uuid"
      >
        {{ yiyan.hitokoto }} —— {{ yiyan.from_who }}《{{ yiyan.from }}》{{
          yiyan_cate[yiyan_cate_c].name ? "[" + yiyan_cate[yiyan_cate_c].name + "]" : ""
        }}
        <a class="muted" @click="getYiYan">
          <a-icon type="reload" />
        </a>
      </p>
      <a-row class="header-content" type="flex" justify="space-between" v-if="userInfo">
        <a-col
          class="left-content"
          :span="12"
          :xs="24"
          :sm="8"
          :md="12"
          :lg="12"
          :xl="16"
          :xxl="18"
        >
          <div class="avatar">
            <a-avatar :size="64" :src="userInfo.avatar">{{ userInfo.name }}</a-avatar>
          </div>
          <div class="user-info">
            <div class="title">{{ helloTime }}{{ userInfo.name }}，祝你开心每一天！</div>
            <div class="team muted" v-if="userInfo.position">
              {{ userInfo.position }}
              <template v-if="userInfo.department">| {{ userInfo.department }}</template>
            </div>
          </div>
        </a-col>
        <a-col
          class="right-content"
          :span="12"
          :xs="24"
          :sm="16"
          :md="12"
          :lg="12"
          :xl="8"
          :xxl="6"
        >
          <div class="content-item">
            <div class="item-title muted">团队人数</div>
            <div class="item-text">
              <span>{{ accounts.total }}</span>
            </div>
          </div>
          <div class="content-item">
            <div class="item-title muted">项目总数</div>
            <div class="item-text">
              <span>{{ projectTotal }}</span>
            </div>
          </div>
          <!-- <div class="content-item">
            <div class="item-title muted">任务数</div>
            <div class="item-text">
              <span>{{task.total}}</span>
            </div>
          </div>-->
        </a-col>
      </a-row>
    </div>
    <!--<wrapper-content :showHeader="false">-->
    <div class="page-wrapper">
      <a-row :gutter="24">
        <a-col :span="12" :xs="24" :sm="24" :md="24" :lg="16" :xl="14" :xxl="14">
          <a-card
            class="project-list"
            :loading="loading"
            style="margin-bottom: 24px"
            :bordered="false"
            title="最近的项目"
            :body-style="{ padding: 0 }"
          >
            <router-link to="/project/list/my" slot="extra">全部项目</router-link>
            <a-row :gutter="0">
              <a-col
                class="project-card-grid"
                :key="i"
                v-for="(item, i) in projectList"
                :span="8"
                :xs="24"
                :sm="12"
                :md="8"
                :lg="8"
                :xl="8"
                :xxl="8"
              >
                <a-card
                  :bordered="false"
                  :body-style="{ padding: 0 }"
                  @click="routerLink('/project/space/task/' + item.code)"
                >
                  <a-card-meta>
                    <div slot="title" class="card-title">
                      <a-avatar size="small" :src="item.cover" />
                      <router-link :to="'/project/space/task/' + item.code">
                        <a-icon
                          type="star"
                          theme="filled"
                          style="color: #ffaf38; margin-right: 6px"
                          v-show="item.collected"
                        />
                        {{ item.name }}
                      </router-link>
                    </div>
                    <div slot="description" class="card-description">
                      <a-tooltip :mouseEnterDelay="0.3" :title="item.description">
                        <span class="description-text">
                          <span v-if="item.description">{{ item.description }}</span>
                          <span v-else>暂无介绍</span>
                        </span>
                      </a-tooltip>
                    </div>
                  </a-card-meta>
                  <a-tooltip
                    placement="right"
                    :mouseEnterDelay="0.3"
                    :title="`当前进度：${item.schedule}%`"
                  >
                    <a-progress
                      :strokeWidth="2"
                      :showInfo="false"
                      :percent="item.schedule"
                    />
                  </a-tooltip>
                  <div class="project-item">
                    <a href="/#/">{{ item.owner_name }}</a>
                    <span class="datetime">{{ formatTime(item.create_time) }}</span>
                  </div>
                </a-card>
              </a-col>
              <p class="muted text-center m-t-md m-b-md" v-if="!projectList.length">
                暂无项目
              </p>
            </a-row>
          </a-card>

          <a-card
            class="activities-list"
            :loading="loading"
            title="动态"
            :bordered="false"
          >
            <a-list>
              <a-list-item :key="index" v-for="(item, index) in activities">
                <a-list-item-meta>
                  <a-avatar slot="avatar" :src="item.member_avatar" />
                  <div slot="title">
                    <a-row :gutter="0">
                      <a-col
                        :span="12"
                        :xs="24"
                        :sm="24"
                        :md="11"
                        :lg="12"
                        :xl="12"
                        :xxl="12"
                      >
                        <span>{{ item.member_name }}</span>
                        <span v-if="item.is_comment == 0">
                          <span v-html="item.remark"></span> </span
                        >&nbsp;
                        <template v-if="item.is_comment == 1">
                          发表了评论
                          <p class="comment-text">{{ item.content }}</p>
                        </template>
                      </a-col>
                      <a-col
                        :span="12"
                        :xs="24"
                        :sm="24"
                        :md="13"
                        :lg="12"
                        :xl="12"
                        :xxl="12"
                      >
                        <router-link
                          target="_blank"
                          :to="`/project/space/task/${item.project_code}/detail/${item.source_code}`"
                          >「 {{ item.task_name }} 」</router-link
                        >
                      </a-col>
                    </a-row>
                  </div>
                  <div slot="description">
                    <!--<a-tooltip :mouseEnterDelay="0.3" :title="item.create_time">-->
                    {{ formatTime(item.create_time) }} -
                    <router-link
                      target="_blank"
                      :to="`/project/space/task/${item.project_code}`"
                      class="muted"
                      >{{ item.project_name }}</router-link
                    >
                    <!--</a-tooltip>-->
                  </div>
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </a-card>
        </a-col>

        <a-col
          style="padding: 0 12px"
          :xs="24"
          :sm="24"
          :md="24"
          :lg="8"
          :xl="10"
          :xxl="10"
        >
          <a-card class="tasks-list" style="margin-bottom: 24px" :bordered="false">
            <div slot="title">
              <div class="flex ant-row-flex-space-between ant-row-flex-middle">
                <span>我的任务({{ task.total }})</span>
                <a-select
                  v-model="task.done"
                  @select="taskSelectChange"
                  :defaultActiveFirstOption="false"
                >
                  <a-select-option :key="0">未完成</a-select-option>
                  <a-select-option :key="1">已完成</a-select-option>
                </a-select>
              </div>
            </div>
            <a-tabs
              defaultActiveKey="1"
              size="small"
              :tabBarGutter="0"
              :animated="false"
              @change="taskTabChange"
            >
              <a-tab-pane key="1">
                <span slot="tab"> <a-icon type="bars" />我执行的 </span>
              </a-tab-pane>
              <a-tab-pane key="2">
                <span slot="tab"> <a-icon type="team" />我参与的 </span>
              </a-tab-pane>
              <a-tab-pane key="3">
                <span slot="tab"> <a-icon type="rocket" />我创建的 </span>
              </a-tab-pane>
            </a-tabs>
            <a-list :loading="task.loading">
              <a-list-item :key="index" v-for="(item, index) in task.list">
                <a-list-item-meta>
                  <div slot="title">
                    <div style="display: flex; justify-content: space-between">
                      <router-link
                        target="_blank"
                        class="task-title-wrap"
                        :to="`/project/space/task/${item.projectInfo.code}/detail/${item.code}`"
                      >
                        <a-tooltip title="优先级">
                          <a-tag :color="priColor(item.pri)">{{ item.priText }}</a-tag>
                        </a-tooltip>
                        <a-tooltip :title="item.name">{{ item.name }}</a-tooltip>
                      </router-link>
                      <div>
                        <a-tooltip title="任务开始 - 截止时间" v-if="item.end_time">
                          <span
                            class="label m-r-sm"
                            :class="showTimeLabel(item.end_time)"
                            >{{ showTaskTime(item.begin_time, item.end_time) }}</span
                          >
                        </a-tooltip>
                        <a-tooltip title="子任务" v-if="item.pcode">
                          <a-icon type="cluster" class="m-r-sm muted" />
                        </a-tooltip>
                        <router-link
                          target="_blank"
                          class="muted hidden-xs"
                          :to="'/project/space/task/' + item.projectInfo.code"
                        >
                          <a-tooltip title="所属项目">{{
                            item.projectInfo.name
                          }}</a-tooltip>
                        </router-link>
                      </div>
                    </div>
                  </div>
                  <!-- <div slot="description">
                  </div>-->
                </a-list-item-meta>
              </a-list-item>
            </a-list>
            <a-pagination
              class="pull-right m-b"
              size="small"
              :defaultPageSize="task.pageSize"
              :hideOnSinglePage="true"
              v-model="task.page"
              :total="task.total"
              @change="onLoadMoreTask"
            />
          </a-card>

          <!-- <a-card
            title="快速开始"
            style="margin-bottom: 24px"
            :bordered="false"
            :body-style="{padding: 0}"
          >
            <div class="item-group">
              <a>操作一</a>
              <a>操作二</a>
              <a>操作三</a>
              <a-button size="small" type="primary" ghost icon="plus">添加</a-button>
            </div>
          </a-card>
          <a-card
            title="XX 指数"
            style="margin-bottom: 24px"
            :loading="radarLoading"
            :bordered="false"
            :body-style="{ padding: 0 }"
          >
            <div style="min-height: 400px;">
              <dash :scale="scale" :axis1Opts="axis1Opts" :axis2Opts="axis2Opts" />
              <radar :data="radarData" />
            </div>
          </a-card>-->

          <a-card
            :loading="loading"
            :title="'团队(' + accounts.total + ')'"
            :bordered="false"
          >
            <a-row class="members">
              <a-col
                :span="8"
                :xs="12"
                :sm="8"
                :md="8"
                :lg="8"
                :xl="8"
                :xxl="6"
                v-for="(item, index) in accounts.list"
                :key="index"
              >
                <a
                  @click="
                    routerLink('/members/profile/' + item.membar_account_code + '?key=3')
                  "
                  style="display: flex; align-items: center"
                >
                  <a-avatar size="small" :src="item.avatar" />
                  <span class="member">{{ item.name }}</span>
                </a>
              </a-col>
            </a-row>
            <a-pagination
              class="pull-right m-b"
              :defaultPageSize="accounts.pageSize"
              :hideOnSinglePage="true"
              size="small"
              v-model="accounts.page"
              :total="accounts.total"
              @change="onLoadMoreAccounts"
            />
          </a-card>
        </a-col>
      </a-row>
    </div>
    <!--</wrapper-content>-->
  </div>
</template>

<script>
import { mapState } from "vuex";
import moment from "moment";
import { getYiYan } from "../../api/other";
import { formatTaskTime, relativelyTime, showHelloTime } from "../../assets/js/dateTime";
import { selfList as getProjectList } from "../../api/project";
import { list as accountList } from "../../api/user";
import pagination from "../../mixins/pagination";
import { getLogBySelfProject, selfList } from "../../api/task";
import task from "../project/space/task";

export default {
  components: {},
  mixins: [pagination],
  data() {
    return {
      loading: {
        spinning: false,
        indicator: <a-icon type="loading" style="font-size: 2rem" spin />,
      },
      yiyan: {},
      yiyan_cate_c: 0,
      yiyan_cate: [
        { id: "a", name: "动画", title: "动画" },
        { id: "b", name: "漫画", title: "漫画" },
        { id: "c", name: "游戏", title: "游戏" },
        { id: "d", name: "文学", title: "文学" },
        { id: "e", name: "", title: "原创" },
        { id: "f", name: "", title: "网络" },
        { id: "g", name: "", title: "其他" },
        { id: "h", name: "影视", title: "影视" },
        { id: "i", name: "诗词", title: "诗词" },
        { id: "j", name: "", title: "网易云" },
        { id: "k", name: "哲学", title: "哲学" },
        { id: "l", name: "", title: "抖机灵" },
      ],
      projectList: [],
      projectTotal: 0,
      activities: [],
      tasks: [],
      tasksTotal: 0,
      // accounts: [],
      accounts: {
        list: [],
        total: 0,
        page: 1,
        pageSize: 10,
        loading: false,
      },
      task: {
        list: [],
        taskType: "1",
        done: 0,
        total: 0,
        page: 1,
        pageSize: 10,
        loading: false,
      },
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo,
      socketAction: (state) => state.socketAction,
    }),
    helloTime() {
      return showHelloTime();
    },
  },
  created() {
    this.getYiYan();
    this.init();
  },
  watch: {
    $route: function (to, from) {
      this.init();
    },
    socketAction(val) {
      console.log(val);
      if (val.action === "organization:task") {
        this.init(false, false);
      }
    },
  },
  methods: {
    init(reset = true, loading = true) {
      if (reset) {
        this.projectList = [];
        this.pagination.page = 1;
        this.pagination.pageSize = 9;
      }
      this.getProjectList(loading);
      this.getTasks();
      this.getTaskLog();
      this.getAccountList();
    },
    getProjectList(loading) {
      if (loading) {
        this.loading = true;
      }
      getProjectList(this.requestData).then((res) => {
        this.projectList = res.data.list;
        this.projectTotal = res.data.total;
        this.loading = false;
      });
    },
    getTaskLog() {
      getLogBySelfProject().then((res) => {
        this.activities = res.data;
      });
    },
    getAccountList() {
      this.accounts.loading = true;
      accountList({
        page: this.accounts.page,
        pageSize: this.accounts.pageSize,
        searchType: 1,
      }).then((res) => {
        this.accounts.loading = false;
        this.accounts.list = res.data.list;
        this.accounts.total = res.data.total;
      });
    },
    getYiYan() {
      let app = this;
      this.yiyan_cate_c = Math.floor(Math.random() * 12);
      getYiYan(function (data) {
        app.yiyan = data;
      }, this.yiyan_cate[this.yiyan_cate_c].id);
    },
    getTasks() {
      this.task.loading = true;
      selfList({
        page: this.task.page,
        pageSize: this.task.pageSize,
        taskType: this.task.taskType,
        type: this.task.done,
      }).then((res) => {
        this.task.loading = false;
        this.task.list = res.data.list;
        // this.task.list =  this.task.list.concat(res.data.list);
        this.task.total = res.data.total;
      });
    },
    taskTabChange(key) {
      console.log(key);
      this.task.taskType = key;
      this.task.loadingMore = true;
      this.task.page = 1;
      this.getTasks();
    },
    taskSelectChange(value) {
      this.task.done = value;
      this.task.loadingMore = true;
      this.task.page = 1;
      this.getTasks();
    },
    onLoadMoreTask(page, PageSize) {
      this.task.loadingMore = true;
      this.task.page = page;
      this.getTasks();
    },
    onLoadMoreAccounts(page, PageSize) {
      this.accounts.loadingMore = true;
      this.accounts.page = page;
      this.getAccountList();
    },
    priColor(pri) {
      switch (pri) {
        case 1:
          return "#ff9900";
        case 2:
          return "#ed3f14";
        default:
          return "green";
      }
    },
    formatTime(time) {
      return relativelyTime(time);
    },
    showTaskTime(time, timeEnd) {
      return formatTaskTime(time, timeEnd);
    },
    showTimeLabel(time) {
      let str = "label-primary";
      if (time == null) {
        return str;
      }
      let cha = moment(moment(time).format("YYYY-MM-DD")).diff(
        moment().format("YYYY-MM-DD"),
        "days"
      );
      if (cha < 0) {
        str = "label-danger";
      } else if (cha == 0) {
        str = "label-warning";
      } else if (cha > 7) {
        str = "label-normal";
      }
      return str;
    },
  },
};
</script>

<style lang="less">
.home-index {
  .page-header {
    padding: 1rem 2rem 0;
    .header-content {
      .left-content {
        display: flex;
        align-items: center;
        margin: 1rem 0;

        .user-info {
          margin-left: 12px;
          line-height: 1.75;

          .title {
            font-size: 1rem;
          }

          .team {
          }
        }
      }

      .right-content {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1rem auto;

        .content-item {
          padding: 0 20px;
          position: relative;

          .item-text {
            font-size: 30px;

            .small {
              font-size: 20px;
            }
          }

          &:after {
            background-color: #e8e8e8;
            position: absolute;
            top: 8px;
            right: 0px;
            width: 1px;
            /* height: 40px; */
            margin: auto 0;
            bottom: 18px;
            content: "";
          }

          &:last-child {
            &:after {
              width: 0;
            }
          }
        }
      }
    }
  }

  .page-wrapper {
    margin: 24px;
    .ant-card-head {
      user-select: none;
    }
    .project-list {
      .project-card-grid {
        padding: 24px !important;
        border: 0;
        border-radius: 0;
        box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8,
          inset 1px 0 0 0 #e8e8e8, inset 0 1px 0 0 #e8e8e8;
        transition: all 0.3s;
        position: relative;
        box-sizing: border-box;
        &:hover {
          position: relative;
          z-index: 1;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }
      }
      .card-title {
        font-size: 0;

        a {
          color: rgba(0, 0, 0, 0.85);
          margin-left: 12px;
          line-height: 24px;
          height: 24px;
          display: inline-block;
          vertical-align: top;
          font-size: 14px;

          &:hover {
            color: #1890ff;
          }
        }
      }

      .card-description {
        color: rgba(0, 0, 0, 0.45);
        height: 44px;
        line-height: 22px;
        overflow: hidden;
        .description-text {
          height: 22px;
        }
      }

      .project-item {
        display: flex;
        margin-top: 8px;
        overflow: hidden;
        font-size: 12px;
        height: 20px;
        line-height: 20px;

        a {
          color: rgba(0, 0, 0, 0.45);
          display: inline-block;
          flex: 1 1 0;

          &:hover {
            color: #1890ff;
          }
        }

        .datetime {
          color: rgba(0, 0, 0, 0.25);
          flex: 0 0 auto;
          float: right;
        }
      }

      .ant-card-meta-description {
        color: rgba(0, 0, 0, 0.45);
        height: 44px;
        line-height: 22px;
        overflow: hidden;
      }
    }

    .activities-list {
      margin-bottom: 24px;
      .ant-card-head {
        user-select: none;
      }
      .ant-card-body {
        padding: 0 20px;
      }
      .ant-list-item-meta-title {
        position: relative;
        line-height: 1.5;
      }
      .ant-list-item-meta-avatar {
        margin-top: 5px;
      }
      .comment-text {
        margin-bottom: 0;
      }
      .ant-list-item-meta-description {
        line-height: 1.75;
        font-size: 0.8rem;
      }
    }

    .tasks-list {
      .ant-card-body {
        padding: 6px 14px;

        .ant-list-item-meta,
        .ant-list-item-meta-content {
          width: 100%;
        }

        .task-title-wrap {
          /*max-width: 310px;*/
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding-right: 10px;
        }
      }
    }

    .item-group {
      padding: 20px 0 8px 24px;
      font-size: 0;

      a {
        color: rgba(0, 0, 0, 0.65);
        display: inline-block;
        font-size: 14px;
        margin-bottom: 13px;
        width: 25%;
      }
    }

    .members {
      a {
        display: block;
        margin: 12px 0;
        line-height: 24px;
        height: 24px;

        .member {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.65);
          line-height: 24px;
          max-width: 100px;
          vertical-align: top;
          margin-left: 6px;
          transition: all 0.3s;
          display: inline-block;
        }

        &:hover {
          span {
            color: #1890ff;
          }
        }
      }
    }
  }
}
</style>
